<!doctype html>
<html>
    <head>
        <title>页签组件手册 - HT for Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css">
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white;
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;
            }
            .logo{
                vertical-align: middle;
            }

        </style>
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }

                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];

                    // a small hack to make it work on android
                    iframe.ontouchstart = func;

                    if (window.location && window.location.hostname && window.location.hostname.indexOf('hightopo') >= 0) {
                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '<a href="https://hightopo.com/codeeditor/index.html?url=' + iframe.contentWindow.location.pathname + '" target="_blank">在线编辑</a>';
                        iframe.parentNode.insertBefore(div, iframe);

                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;';
                        iframe.parentNode.insertBefore(div, iframe);
                    }

                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }
            }
        </script>
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 页签组件手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_tab">页签</a></li><li><a href="#ref_tabview">页签组件</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>提供了页签组件类<code>ht.widget.TabView</code>，以页签的方式呈现多组件，页签支持拖拽和关闭等功能，
页签对应的视图组件可为<code>HT</code>框架提供的组件，也可为<code>HTML</code>原生组件，子组件以<code>position</code>为<code>absolute</code>方式进行绝对定位。</p>

<p>每个<code>TabView</code>组件对象内置了一个<code>tabView.getTabModel()</code>页签模型容器，页签模型容器为<code>ht.DataModel</code>类型，
可对该模型容器增删<code>ht.Tab</code>类型页签对象，<code>ht.Tab</code>对象存储着页签对应的视图、文本和图标等信息。</p>

<p>页签的选中实际就是对<code>tabView.getTabModel()</code>容器对应的<code>SelectionModel</code>选中模型的控制，
可对选中模型添加监听和控制选择，但<code>TabView</code>提供了更直接的函数接口，大部分情况下无需与<code>SelectionModel</code>打交道。</p>

<div id="ref_tab"></div>

<h2>页签</h2>

<p><code>ht.Tab</code>页签类型具有以下页签相关属性函数：</p>

<ul><li><code>getView()</code>和<code>setView(view)</code>获取和设置页签被选中时呈现的视图组件</li><li><code>isClosable()</code>和<code>setClosable(true/false)</code>获取和设置页签是否可关闭，可关闭页签右上角会有叉号可进行关闭操作，默认为<code>false</code></li><li><code>isDisabled()</code>和<code>setDisabled(true/false)</code>获取和设置页签是否可选中和关闭，默认为<code>false</code></li></ul>

<div id="ref_tabview"></div>

<h2>页签组件</h2>

<p>页签组件类<code>ht.widget.TabView</code>主要可配置属性和函数如下：</p>

<ul><li><code>isDisabled()</code>和<code>setDisabled(true/false, iconURL)</code>获取和设置整个组件处于不可用状态</li><li><code>getLabel(tab)</code>获取页签文字内容，默认返回<code>tab.toLabel()</code>，可重载自定义</li><li><code>getLabelFont(tab)</code>获取页签文字字体，可重载自定义</li><li><code>getLabelColor(tab)</code>和<code>setLabelColor(color)</code>获取和设置页签文字颜色，可重载自定义</li><li><code>getTabModel()</code>获取<code>TabView</code>组件内置了<code>DataModel</code>类型的<code>Tab</code>模型容器，用于增删<code>Tab</code>页签</li><li><code>getCurrentTab()</code>获取当前选中显示的<code>Tab</code>对象</li><li><code>onTabChanged(oldTab, newTab)</code>当前选中<code>Tab</code>对象变化时回调，可重载做后续处理</li><li><code>onTabClosed(tab, index)</code>关闭<code>Tab</code>页签回调函数，<code>index</code>为关闭页签所在索引，默认处理会选中上一个页签</li><li><code>get(nameOrIndex)</code>获取指定的<code>Tab</code>对象，参数可为<code>Tab</code>的标签文字或索引</li><li><code>remove(tabOrIndex)</code>删除指定的<code>Tab</code>页，参数可为<code>Tab</code>对象，或整数类型的索引，或页签文字</li><li><code>select(tabOrIndex)</code>选中指定的<code>Tab</code>页，参数可为<code>Tab</code>对象，或整数类型的索引，或页签文字</li><li><code>add(name, view, selected)</code>添加页签，该函数构建了<code>Tab</code>对象，添加到<code>tabModel</code>中，并将<code>Tab</code>对象函数返回</li><li><code>isMovable()</code>和<code>setMovable(true)</code>获取和设置页签是否可拖拽移动改变显示顺序，默认值为<code>true</code></li><li><code>getTabGap()</code>和<code>setTabGap(1)</code>获取和设置页签间隔，默认值为<code>1</code></li><li><code>getTabHeight()</code>和<code>setTabHeight(24)</code>获取和设置页签高度</li><li><code>getTabPosition()</code>和<code>setTabPosition(&#39;top&#39;)</code>获取和设置页签位置，可取值为<code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code>、<code>left-vertical</code>、<code>right-vertical</code>默认值为<code>top</code></li><li><code>getTabBackground()</code>和<code>setTabBackground(color)</code>获取和设置页签背景色</li><li><code>getSelectBackground()</code>和<code>setSelectBackground(color)</code>获取和设置页签选中线条背景色</li><li><code>getSelectWidth()</code>和<code>setSelectWidth(3)</code>获取和设置页签选中的线条宽度，默认值为<code>3</code></li><li><code>getMoveBackground()</code>和<code>setMoveBackground(color)</code>获取和设置移动时的页签背景色</li><li><code>getInsertColor()</code>和<code>setInsertColor(color)</code>获取和设置移动提示插入位置颜色</li></ul>

<p><iframe src="examples/example_basic.html" style="height:500px"></iframe></p>

<p>示例中创建了<code>tabPosition</code>位置分别为<code>top</code>和<code>bottom</code>的两个<code>TabView</code>对象</p>

<pre><code>function init(){
    tabView1 = createTabView();
    tabView2 = createTabView();
    splitView = new ht.widget.SplitView(tabView1, tabView2, &#39;v&#39;);

    tabView1.setTabPosition(&#39;right-vertical&#39;);
    tabView2.setTabPosition(&#39;bottom&#39;);
    tabView2.select(&#39;SUN FLOWER&#39;);

    view = splitView.getView();
    view.className = &#39;main&#39;;
    document.body.appendChild(view);
    window.addEventListener(&#39;resize&#39;, function (e) {
        splitView.invalidate();
    }, false);

}

function createTabView(){
    var tabView = new ht.widget.TabView();
    tabView.setSelectBackground(&#39;#D26911&#39;);
    tabView.setTabBackground(&#39;#F5F5F5&#39;);
    tabView.setLabelColor(&#39;#333333&#39;);

    add(tabView, &#39;TURQUOISE&#39;, &#39;#1ABC9C&#39;).setDisabled(true);
    add(tabView, &#39;PETER RIVER&#39;, &#39;#3498DB&#39;, true).setIcon(&#39;search&#39;);
    add(tabView, &#39;AMETHYST&#39;, &#39;#9B59B6&#39;);
    add(tabView, &#39;WET ASPHALT&#39;, &#39;#34495E&#39;).setClosable(true);
    add(tabView, &#39;SUN FLOWER&#39;, &#39;#F1C40F&#39;);
    add(tabView, &#39;CLOUDS&#39;, &#39;#ECF0F1&#39;).setIcon(&#39;edit&#39;);
    add(tabView, &#39;ALIZARIN&#39;, &#39;#E74C3C&#39;).setIcon(&#39;settings&#39;);

    return tabView;
}

function add(tabView, name, color, selected){
    // create view
    var div = document.createElement(&#39;div&#39;);
    div.style.background = color;

    // create tab
    var tab = new ht.Tab();
    tab.setName(name);
    tab.setView(div);

    // add to model
    var tabModel = tabView.getTabModel();
    tabModel.add(tab);
    if(selected){
        tabModel.getSelectionModel().setSelection(tab);
    }
    return tab;
}</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
